'use strict'
import { View, ListView } from '../../component/index'
import globalStyle from '../css.css'
import style from './css.css'
import Descriptor from '../descriptor'
import Item from './Item'
import listDemoFetch from '../../config/listDemoFetch'
let page = 1
let isLoading = false
class ListViewLoadMore extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      dataSource: []
    }
  }

  componentDidMount () {
    this._fetchData()
  }

  async _fetchData (cb) {
    if (isLoading) { return }
    isLoading = true
    const res = await listDemoFetch(page)
    if (res.success) {
      page++
      this.setState({
        dataSource: this.state.dataSource.concat(res.data)
      })
    }
    isLoading = false
    cb && cb(true)
  }

  render () {
    return (
      <View className={globalStyle.example}>
        <ListView
          Item={Item}
          dataSource={this.state.dataSource}
          itemKey="id"
          bottomRefresh={(cb) => { this._fetchData(cb) }}
          className={style.verticalScrollView}>
        </ListView>
        <Descriptor
          title="上拉加载"
        >
        通过设置`bottomRefresh`属性可实现上拉加载，加载次数可通过回调函数控制。
        </Descriptor>
      </View>
    )
  }
}
export default ListViewLoadMore
